Nuxt 대시보드 프로젝트 시리즈 (2): Naive UI와 UnoCSS 연동하기

// uno.config.ts
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
 
export default defineConfig({
  presets: [
    presetUno(), // 기본 프리셋
    presetAttributify(), // 속성 기반 스타일 지원
    presetIcons(), // 아이콘 사용 지원
  ],
  shortcuts: {
    'flex-center': 'flex items-center justify-center',
    'card-base': 'bg-white rounded-lg shadow-sm border border-gray-200 p-4',
  }
})

<!-- app.vue -->
<script setup>
import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui'
 
/** @type {import('naive-ui').GlobalThemeOverrides} */
const themeOverrides = {
  common: {
    primaryColor: '#18a058',
    primaryColorHover: '#36ad6a',
  },
  Button: {
    fontWeight: 'bold'
  }
}
</script>
 
<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </n-config-provider>
</template>

<!-- 사용 예시 -->
<div class="i-carbon-dashboard text-xl" /> <!-- 대시보드 아이콘 -->
<div class="i-carbon-user-avatar text-blue-500" /> <!-- 유저 아이콘 -->